<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="popup-wrap">
    <div class="calendar-day-wrap">
      <customHeader middleTitle="日报" @leftCallBack="popupHide" :jsBridgeBack="false" />
      <ul class="ope">
        <li @click="prev" :class="{disabled:preDisabled}">前一个月</li>
        <li @click="next" :class="{disabled:nextDisabled}">后一个月</li>
      </ul>
      <ul class="week">
        <li v-for="(week,index) in weekList" :key="index">{{week}}</li>
      </ul>
      <div class="data-wrap">
        <div class="month-wrap" v-for="(item,ii) in dateList" :key="ii" v-show="item.visible">
          <div class="month">{{item.month}}月</div>
          <ul class="day-list">
            <li v-for="(ind,i) in item.indent" :key="'null-'+i"></li>
            <li
              v-for="(day,index) in item.days"
              :key="index"
              @click="handleSelect(item.year,item.month,day,[ii,index])"
            >
              {{dayFormate(day)}}
              <div class="money">¥{{getMoney(item.year,item.month,day)}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </mt-popup>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import customHeader from "../../components/header/header";
export default {
  name: "calendarDay",
  data() {
    return {
      popupVisible: false,
      weekList: ["一", "二", "三", "四", "五", "六", "日"],
      dateList: [],
      moneyList: [],
      preDisabled: false,
      nextDisabled: true,
    };
  },
  methods: {
    //日补0
    dayFormate(day) {
      if (day < 10) {
        return "0" + day;
      } else {
        return day;
      }
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    prev() {
      this.nextDisabled = false;
      if (this.preDisabled) {
        return;
      }
      for (let i = 0; i < this.dateList.length; i++) {
        if (this.dateList[i].visible) {

          if (i - 1 >= 0) {
            this.dateList[i - 1].visible = true;
            this.dateList[i].visible = false;
            const date = this.dateList[i - 1];
            const s = new Date(`${date.year}/${date.month}/${1}`).getTime();
            const e = new Date(`${date.year}/${date.month}/${date.days[date.days.length - 1]}`).getTime();
            this.reqData(s, e);
          }
          if (i - 1 == 0) {
            this.preDisabled = true;
          } else {
            this.preDisabled = false;
          }
          break;
        }
      }
    },
    next() {
      this.preDisabled = false;
      if (this.nextDisabled) {
        return;
      }
      for (let i = 0; i < this.dateList.length; i++) {
        if (this.dateList[i].visible) {
          if (i + 1 < this.dateList.length) {
            this.dateList[i + 1].visible = true;
            this.dateList[i].visible = false;
            const date = this.dateList[i + 1];
            const s = new Date(`${date.year}/${date.month}/${1}`).getTime();
            const e = new Date(`${date.year}/${date.month}/${date.days[date.days.length - 1]}`).getTime();
            this.reqData(s, e);
          }
          if (i + 2 >= this.dateList.length) {
            this.nextDisabled = true;
          } else {
            this.nextDisabled = false;
          }

          break;
        }
      }
    },
    getMonthDays(year, month) {
      let dayCount = new Date(year, month, 0).getDate();
      let days = [];
      const indent = this.getIndent(year, month);//每月第一天前边空出的天
      let visible = false;
      if (month == new Date().getMonth() + 1) {
        dayCount = new Date().getDate();
        visible = true;
      }
      for (let i = 1; i < dayCount + 1; i++) {
        days.push(i);
      }

      return { year: year, month: month, indent: indent, days: days, visible: visible };
    },
    //需要缩进几天
    getIndent(year, month) {
      var indent = [];
      const d = this.getDateFirst(year, month);
      var weekday = [7, 1, 2, 3, 4, 5, 6];
      const len = weekday[d.getDay()];
      for (let i = 1; i < len; i++) {
        indent.push(i);
      }
      return indent;
    },

    //获取月份第一天
    getDateFirst(year, month) {
      var d = new Date();
      d.setYear(year);
      d.setMonth(month - 1);
      d.setDate(1);
      return d;
    },
    generateDay() {
      var cur = new Date();
      var m = cur.getMonth() + 1;
      var y = cur.getFullYear();
      for (let i = m - 6 + 1; i <= m; i++) {
        let year = i <= 0 ? y - 1 : y;
        let month = i <= 0 ? i + 12 : i;
        this.dateList.push(this.getMonthDays(year, month));
      }
      const min=new Date(`${this.dateList[0].year}/${this.dateList[0].month}/${1}`).getTime();
      this.$emit("rangeMin", { reportType: "day", value:min});
    },
    handleSelect(year, month, day,index) {
      const start = new Date(`${year}/${month}/${day}`);
      const end = start;
      let today = "";
      const curr = new Date();
      if (year == curr.getFullYear() && curr.getMonth() + 1 == month && curr.getDate() == day) {
        today = "(今天)";
      }
      this.$emit("reportSelect", { reportType: "day", dateLabel: `${year}-${this.dayFormate(month)}-${this.dayFormate(day)}${today}`, dateScope: { startDate: start.getTime(), endDate: end.getTime() },index:index });
      this.popupHide();
    },
    getMoney(year, month, day) {
      let money = "0.00";
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let d = "" + year + month + day;
      this.moneyList.map((item) => {
        if (item.bizDate == d) {
          money = item.payAmt ? item.payAmt : "0.00";
        }
      });
      return money;
    },
    reqData(startDate, endDate) {
      // 分类型查询:1、按月查询每天数据；2，按月查询每周数据；3：按年查询每月数据
      const param = { type: 1, startDate: startDate, endDate: endDate };
      this.ajax({
        url: "/newapp/statistics/queryTradeDaysSummaryList.do",
        type: "post",
        data: param
      })
        .then(result => {
          if (result.success) {
            this.moneyList = result.resultObject;
          } else {
            Toast(result.msg);
          }
        })
        .catch((err) => {

        });
    }

  },
  created() {
    this.generateDay();

  },
  watch: {
    popupVisible(v) {
      if (v && this.moneyList.length === 0) {
        const cur = new Date();
        cur.setDate(1);
        const s = moment(cur).startOf('day').valueOf();
        this.reqData(s, new Date().getTime());
      }
    }
  },
  components: {
    customHeader
  },
};
</script>
<style lang='scss'>
@import "calendar";
</style>
